<template>
    <div class="qczs">

        <el-row>
            <el-col :span="24">
                <h2 class="section-title">全程追溯</h2>
            </el-col>
            <el-col :span="24">
                <el-row justify="space-between" class="process-container">
                    <el-col :span="2" v-for="(item, index) in processList" :key="index">
                        <div class="process-item">
                            <!-- 图标 -->
                             <div class="iconbao">
                                <div class="icon-box" v-html="item.icon"></div>
                             </div>
                            
                            <div class="title">{{ item.title }}</div>
                            <div class="date">{{ item.date }}</div>
                            <div class="desc">{{ item.desc }}</div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            processList: [{
                icon: '<svg t="1754133431431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55980" width="40" height="40"><path d="M760.1 834.28c-58.23 0-105.6-47.37-105.6-105.6s47.37-105.6 105.6-105.6 105.6 47.37 105.6 105.6-47.37 105.6-105.6 105.6z m0-176.19c-38.93 0-70.6 31.67-70.6 70.6s31.67 70.6 70.6 70.6 70.6-31.67 70.6-70.6-31.67-70.6-70.6-70.6zM275.17 836.75c-93.86 0-170.23-76.36-170.23-170.23s76.36-170.23 170.23-170.23S445.4 572.65 445.4 666.52s-76.36 170.23-170.23 170.23z m0-305.45c-74.56 0-135.23 60.66-135.23 135.23s60.66 135.23 135.23 135.23S410.4 741.1 410.4 666.53 349.74 531.3 275.17 531.3z" p-id="55981" fill="#2e7d32"></path><path d="M217 535c-9.67 0-17.5-7.83-17.5-17.5V270.11c0-31.77 25.84-57.61 57.61-57.61h270.34c17.24 0 33.65 7.43 45.02 20.39a59.9 59.9 0 0 1 14.36 47.29l-18.98 144.6c-1.26 9.58-10.04 16.33-19.63 15.07-9.58-1.26-16.33-10.05-15.07-19.63l18.98-144.6c0.95-7.21-1.17-14.19-5.97-19.65-4.79-5.46-11.44-8.47-18.71-8.47H257.11c-12.47 0-22.61 10.14-22.61 22.61V517.5c0 9.67-7.83 17.5-17.5 17.5zM636.89 620h-217.6c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5h217.6c9.67 0 17.5 7.83 17.5 17.5s-7.83 17.5-17.5 17.5zM681.18 707H425.99c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5h255.19c9.67 0 17.5 7.83 17.5 17.5s-7.83 17.5-17.5 17.5zM867 707h-18.81c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5H867c14.34 0 26-11.66 26-26s-11.66-26-26-26h-29.5c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5H867c33.64 0 61 27.36 61 61s-27.36 61-61 61z" p-id="55982" fill="#2e7d32"></path><path d="M837.9 608.5c-0.68 0-1.37-0.04-2.06-0.12-9.6-1.12-16.47-9.82-15.35-19.42l14.33-122.46c0.78-6.7-1.25-13.16-5.74-18.2-4.48-5.04-10.66-7.81-17.41-7.81H284.5c-9.67 0-17.5-7.83-17.5-17.5s7.83-17.5 17.5-17.5h527.18c16.63 0 32.5 7.12 43.55 19.55a58.37 58.37 0 0 1 14.35 45.53l-14.33 122.46c-1.04 8.91-8.6 15.47-17.36 15.47z" p-id="55983" fill="#2e7d32"></path><path d="M717.5 439.5c-9.67 0-17.5-7.83-17.5-17.5v-95.5c0-9.67 7.83-17.5 17.5-17.5s17.5 7.83 17.5 17.5V422c0 9.67-7.83 17.5-17.5 17.5zM275.17 743.53c-42.46 0-77-34.54-77-77s34.54-77 77-77 77 34.54 77 77-34.54 77-77 77z m0-119c-23.16 0-42 18.84-42 42s18.84 42 42 42 42-18.84 42-42-18.84-42-42-42z" p-id="55984" fill="#2e7d32"></path></svg>',
                title: '种植阶段',
                desc: '有机肥料施用'
            },
            {
                icon: '<svg t="1754133609025" class="icon" viewBox="0 0 1478 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57096" width="40" height="40"><path d="M1114.712426 1.048038c45.092589-3.150574 89.594445 0.787643 133.111747 12.011563 43.517302 11.22392 82.308743 25.204591 116.177412 41.942015 33.868669 16.737424 61.23928 34.459402 82.308743 53.165934 20.872552 18.903443 31.505739 34.656313 31.505739 47.65243 0 12.996117-8.073346 20.675641-24.220037 23.432393-16.146691 2.756752-36.2316 5.119683-60.451637 7.285702-24.220037 2.16602-50.803004 6.104237-79.748902 12.011563-28.945898 5.907326-56.513419 19.100354-82.308743 39.579085-17.131246 12.996117-33.671759 27.1737-49.227717 42.729658-15.555959 15.555959-31.111917 30.718095-46.864787 45.092589-15.555959 14.571404-31.70265 27.961343-48.440074 40.366728-16.737424 12.405385-34.656313 21.857106-53.953578 28.158254-9.648633 3.150574-21.463285 6.498059-35.443956 9.648633-13.980672 3.150574-28.748987 3.938217-44.304945 2.36293-15.555959-1.575287-31.70265-6.69497-48.440074-15.359048C887.477284 382.858212 871.527504 368.286808 856.562278 348.004989 846.913645 360.804195 838.446478 376.163243 831.554597 393.885221c-7.088791 17.721978-13.193028 36.822332-18.509622 57.301063-5.316593 20.47873-10.042454 41.745104-13.783761 63.799121C795.519909 537.039422 792.566246 557.715064 790.400226 577.012329c-2.16602 16.146691-3.741307 36.2316-4.922772 60.451637-0.984554 24.220037-1.378376 48.046252-0.787643 71.872467 0.590733 23.629304 1.969109 45.486411 3.938217 65.374408 2.16602 19.887998 5.316593 34.06558 9.648633 42.729658 5.316593 9.648633 8.073346 17.721978 8.073346 24.220037 0 5.316593-2.756752 10.436276-8.073346 15.359048-5.316593 4.922772-15.555959 7.285702-30.718095 7.285702-17.131246 0-28.748987-2.36293-34.656313-7.285702-5.907326-4.922772-8.860989-10.042454-8.860989-15.359048-0.984554-6.498059 0.984554-13.980672 6.498059-22.64475 5.316593-10.830098 8.860989-23.432393 10.436276-38.003798 1.575287-14.571404 2.16602-30.127363 1.575287-46.864787-0.590733-16.737424-1.378376-33.671759-2.36293-50.803004-0.984554-17.131246-1.575287-33.868669-1.575287-50.015361C721.678333 599.066346 704.940909 569.923537 688.794218 546.294233c-16.146691-23.629304-33.868669-46.274054-53.165934-67.737339-11.814652 25.795324-25.598413 45.092589-41.154372 58.088706-15.555959 12.996117-31.505739 21.857106-47.65243 26.582967-16.146691 4.922772-31.505739 7.088791-45.880232 6.498059-14.571404-0.590733-27.1737-1.969109-38.003798-3.938217-19.297265-3.150574-37.609976-9.451722-54.938132-18.509622-17.131246-9.0579-34.459402-19.297265-51.590648-30.718095-17.131246-11.22392-34.656313-23.432393-52.378291-36.2316-17.721978-12.996117-35.837778-24.220037-53.953578-33.868669-27.961343-16.146691-56.71033-24.810769-86.24696-25.795324-29.53663-0.984554-56.513419-0.196911-80.733456 2.36293-24.220037 2.756752-44.108035 3.741307-59.663993 3.150574-15.555959-0.590733-23.432393-7.876435-23.432393-21.857106 0-13.980672 8.860989-31.70265 26.582967-53.165934 17.721978-21.463285 41.351282-42.729658 70.887913-63.799121 29.53663-20.872552 64.192943-39.775995 103.968939-56.513419s81.71801-27.1737 125.826045-31.505739c67.737339-6.498059 123.856936-2.953663 168.555703 10.436276 44.698767 13.389939 79.551991 32.490293 104.756582 57.301063C626.176562 292.082302 641.929431 320.437467 648.42749 352.730849c6.498059 32.293382 5.316593 64.586765-3.150574 96.880147 34.459402 31.111917 68.328071 70.887913 101.606008 119.327986C752.199517 516.16687 765.589457 463.000936 787.249652 409.244269c8.664078-18.312711 16.737424-33.868669 24.220037-46.864787 7.482613-12.996117 16.737424-26.976789 27.370611-41.942015C821.512143 289.32555 812.651154 256.047613 812.257332 220.603657c-0.590733-35.443956 9.648633-68.918804 30.718095-100.030721 21.069463-31.111917 53.559756-57.891795 97.667791-79.945813C984.554342 18.573106 1042.643048 5.380078 1114.712426 1.048038L1114.712426 1.048038zM633.856086 444.688225C573.798271 393.097577 510.19606 359.819641 443.640187 344.657504c-66.752784-14.965226-135.474677-13.389939-206.559501 4.922772-2.16602 0-2.756752 0.196911-1.575287 0.787643 0.984554 0.590733 2.756752 0.787643 4.922772 0.787643 31.111917-3.150574 62.814567-4.52895 95.107949-3.938217 32.293382 0.590733 64.783676 5.316593 97.667791 14.571404 32.884115 9.0579 65.374408 22.64475 97.667791 40.366728 32.293382 17.721978 63.996032 41.745104 95.107949 71.872467L633.856086 444.688225 633.856086 444.688225zM1225.967067 138.294914c2.16602 0 3.741307-0.196911 4.922772-0.787643 0.984554-0.590733 0-0.787643-3.150574-0.787643-78.567437-7.482613-149.455349 4.52895-212.860649 36.2316-63.4053 31.70265-119.327986 78.173615-167.76806 139.609806l16.146691 27.370611c28.945898-39.775995 58.87635-72.66011 89.594445-98.455434 30.718095-25.795324 61.830013-46.274054 93.532663-61.23928 31.70265-14.965226 62.617656-25.598413 92.745019-31.505739S1198.005724 139.279468 1225.967067 138.294914L1225.967067 138.294914zM383.976193 962.563809c-8.664078-7.482613-5.907326-16.343602 8.073346-26.582967 13.980672-10.239365 34.459402-20.675641 61.23928-31.505739 26.976789-10.830098 57.301063-21.857106 91.169732-33.081026 33.868669-11.22392 66.358963-21.266374 97.667791-29.930452 13.980672-4.332039 25.00768-3.938217 33.081026 0.787643 8.073346 4.922772 15.555959 11.027009 22.64475 18.509622 7.088791 7.482613 15.555959 14.768315 25.795324 21.857106 10.239365 7.088791 25.00768 10.436276 44.304945 10.436276 19.297265 0 34.06558-3.544396 44.304945-10.436276 10.239365-6.89188 19.100354-13.980672 26.582967-20.872552 7.482613-7.088791 14.965226-12.996117 22.64475-17.721978 7.482613-4.922772 18.312711-5.710415 32.293382-2.36293 31.111917 8.664078 63.996032 18.903443 98.455434 30.718095 34.459402 11.814652 65.374408 23.432393 92.745019 34.656313 27.370611 11.22392 48.046252 22.054017 62.026924 32.293382 13.980672 10.239365 15.555959 17.918889 4.922772 23.432393-25.795324 13.980672-60.451637 25.598413-103.968939 34.656313-43.517302 9.0579-90.77591 15.94978-141.972736 20.084909-50.999915 4.332039-103.772028 6.498059-158.119427 6.498059-54.3474 0-105.741136-2.36293-153.984299-7.285702-48.440074-4.922772-91.366643-11.814652-128.976619-20.872552C426.902763 986.390024 400.122885 975.363015 383.976193 962.563809L383.976193 962.563809z" fill="#2e7d32" p-id="57097"></path></svg>',
                title: '生长过程',
                desc: '生长监测'
            },
            {
                icon: '<svg t="1754133716461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="63808" width="40" height="40"><path d="M227.11 900.74L215.6 783.1c0-10.76 13.54-1.21 30.64-1.21 17.11 0 30.74-9.58 30.74 1.21l-9.59 114.7c0 25.08-40.24 14.86-40.24 2.93h-0.04z m-49.26-382.91c-84.25-38.73-77.41-99.67-77.41-99.67-10.62 21.52 11.96 209.21 99.9 209.21 39.27 0 72.23-66.28-22.41-109.53h-0.08z m0-132.6c-84.25-38.61-77.41-99.54-77.41-99.54-10.62 21.51 11.96 209.2 99.9 209.2 39.27 0 72.23-66.27-22.41-109.66h-0.08z m0-128.64c-84.25-38.42-77.41-99.54-77.41-99.54-10.62 21.52 11.96 209.14 99.9 209.14 39.27 0 72.23-66.09-22.41-109.6h-0.08z m116.81 370.84c87.8 0 110.32-187.69 99.9-209.21 0 0 6.82 60.94-77.54 99.67-94.56 43.2-61.67 109.54-22.28 109.54h-0.08z m-116.81 26.28c-84.25-38.73-77.41-99.67-77.41-99.67-10.62 21.51 11.96 209.2 99.9 209.2 39.27 0 72.23-66.27-22.41-109.54h-0.08z m116.81 109.54c87.8 0 110.32-187.69 99.9-209.2 0 0 6.82 60.94-77.54 99.67-94.56 43.26-61.67 109.54-22.28 109.54h-0.08z m0-268.37c87.8 0 110.32-187.75 99.9-209.2 0 0 6.82 60.94-77.54 99.54-94.56 43.39-61.67 109.66-22.28 109.66h-0.08z m0-128.7c87.8 0 110.32-187.64 99.9-209.14 0 0 6.82 61.04-77.54 99.49-94.56 43.56-61.67 109.65-22.28 109.65h-0.08z m-41.09-99.56c93.17 0-5.13-201.97-5.13-201.97-11.85 18.99-88.03 201.97 5.13 201.97z m251.84 649.89l56.2-100.01c4.46-9.64-11.91-7.01-27.27-14.17-15.35-7.16-23.91-21.86-28.33-12.05L467.7 901.76c-4.95 10.9 27.28 37.35 37.71 14.75z m76.23-383.01c-60.26-71.21-28.89-123.54-28.89-123.54-18.57 14.92-75.72 194.93 3.78 232.5 35.67 16.9 93.1-29.08 25.11-108.96z m54.96-120.38c-60.26-71.04-28.89-123.37-28.89-123.37-18.55 14.92-75.83 194.87 3.73 232.56 35.72 16.81 93.11-29.04 25.16-109.19z m53.33-116.54c-60.49-70.91-28.89-123.48-28.89-123.48-18.63 14.91-75.85 194.8 3.78 232.5 35.65 16.76 93-28.98 25.11-109.02z m-47.64 386.46c79.61 37.47 177.81-122.96 177.13-147.07 0 0-19.01 58.25-111.56 57.16-103.78-1.16-101.29 72.92-65.57 89.91z m-116.81-26.41c-60.37-71.14-29-123.42-29-123.42-18.44 14.93-75.72 194.87 3.84 232.34 35.77 16.91 93.05-28.99 25.16-108.92z m60.55 149.48c79.57 37.64 177.81-122.95 177.18-147.01 0 0-19.08 58.25-111.55 57.16-103.77-1.09-101.3 73.04-65.63 89.85z m111.22-243.34c79.63 37.58 177.8-123.08 177.13-147.02 0 0-19.01 58.19-111.51 57.16-103.82-1.14-101.34 73.11-65.62 89.86z m53.33-116.81c79.61 37.7 177.68-122.84 177.07-146.94 0 0-19.14 58.4-111.51 57.14-103.77-1.09-101.24 73.05-65.56 89.8z m3.89-107.91c84.53 39.87 79-185.35 79-185.35-18.57 12.29-163.41 145.4-79 185.35z m0 0" p-id="63809" fill="#2e7d32"></path></svg>',
                title: '采收环节',
                desc: '人工采摘'
            },
            {
                icon: '<svg t="1754133764604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="65050" width="40" height="40"><path d="M783.8208 996.5056H217.9072a112.896 112.896 0 0 1-95.7952-50.6368 98.1504 98.1504 0 0 1-7.2704-95.232L359.936 307.6096V196.4032h-22.6304a34.048 34.048 0 0 1-34.048-34.048V69.2224a34.048 34.048 0 0 1 34.048-34.048h332.032a34.048 34.048 0 0 1 34.048 34.048v93.184a34.048 34.048 0 0 1-34.048 34.048h-27.4944v107.1104a18.944 18.944 0 0 0 1.6896 7.8336l243.4048 539.2384a98.1504 98.1504 0 0 1-7.2704 95.232 112.896 112.896 0 0 1-95.8464 50.6368zM414.0032 196.4032v112.64a47.9232 47.9232 0 0 1-4.4032 19.712L163.84 872.96a44.5952 44.5952 0 0 0 3.4304 43.6224 59.0848 59.0848 0 0 0 50.3808 25.856h566.1696a59.0848 59.0848 0 0 0 50.3808-25.856 44.5952 44.5952 0 0 0 3.4304-43.6224L594.2272 333.6704a72.6528 72.6528 0 0 1-6.5024-30.1056V196.4032zM357.3248 142.336h291.84V89.2928h-291.84z" fill="#2e7d32" p-id="65051"></path></svg>',
                title: '质检阶段',
                desc: '质量检测'
            },
            {
                icon: '<svg t="1754133799945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="66322" width="40" height="40"><path d="M794.624 366.24A32.032 32.032 0 0 0 768 352h-32a32 32 0 0 0-32 32v192a32 32 0 0 0 32 32h128a32 32 0 0 0 32-32v-48c0-6.304-1.888-12.512-5.376-17.76l-96-144zM864 576h-128v-192h32l96 144V576z" fill="#2e7d32" p-id="66323"></path><path d="M1007.872 490.752l-128-192A95.84 95.84 0 0 0 800 256h-128V192c0-52.928-43.072-96-96-96H96C43.072 96 0 139.072 0 192v352c0 52.928 43.072 96 96 96v96c0 52.928 43.072 96 96 96h36.544c14.304 55.072 64 96 123.488 96 59.424 0 109.12-40.928 123.424-96h169.024c14.304 55.072 64 96 123.488 96 59.424 0 109.12-40.928 123.424-96H928c52.928 0 96-43.072 96-96v-192c0-19.008-5.568-37.44-16.128-53.248zM96 576a32 32 0 0 1-32-32V192a32 32 0 0 1 32-32h480a32 32 0 0 1 32 32v352a32 32 0 0 1-32 32H96z m256.032 288a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM768 864a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m192-128a32 32 0 0 1-32 32h-36.576c-14.304-55.072-64-96-123.424-96-59.488 0-109.184 40.928-123.488 96h-169.024c-14.304-55.072-64-96-123.424-96-59.488 0-109.184 40.928-123.488 96H192a32 32 0 0 1-32-32v-96h416c52.928 0 96-43.072 96-96v-224h128c10.688 0 20.672 5.344 26.624 14.24l128 192c3.488 5.248 5.376 11.456 5.376 17.76v192z" fill="#2e7d32" p-id="66324"></path></svg>',
                title: '包装运输',
                desc: '冷链运输'
            },
            {
                icon: '<svg t="1754131512219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54491" width="40" height="40"><path d="M895.668 558.889C825.084 558.889 767.8 503 767.8 433.919c0 69.074-57.294 124.969-127.866 124.969-70.573 0-127.891-55.889-127.891-124.969 0 69.074-57.276 124.969-127.867 124.969-70.589 0-127.866-55.889-127.866-124.969 0 69.074-57.277 124.969-127.888 124.969C57.847 558.889 0.554 503 0.554 433.919l87.631-228.792 844.395 0 90.867 228.792C1023.558 503 966.257 558.889 895.668 558.889L895.668 558.889 895.668 558.889 895.668 558.889 895.668 558.889zM932.339 203.908l3.638 1.198-3.311 0L932.339 203.908 932.339 203.908 932.339 203.908zM877.333 138.611 146.67 138.611c-24.118 0-43.826-17.825-43.826-39.896 0-21.999 19.615-39.825 43.826-39.825l730.663 0c24.318 0 44.022 17.853 44.022 39.825C921.356 120.813 901.652 138.611 877.333 138.611L877.333 138.611 877.333 138.611 877.333 138.611 877.333 138.611zM161.331 636.482l0 262.801 701.522 0L862.853 636.482c0 0 9.979-0.34 14.476 0l58.648 0 0 275.931c0 23.157-29.828 52.696-56.229 52.696L144.524 965.109c-26.585 0-56.236-29.539-56.236-52.696L88.288 636.482l73.023 0L161.331 636.482 161.331 636.482z" fill="#2e7d32" p-id="54492"></path></svg>',
                title: '销售终端',
                desc: '上架销售'
            }]
        }
    },
}
</script>

<style scoped>
.qczs {
    padding: 20px;
}
.iconbao{
    background-color: #f5f5f5;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.process-item{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.icon-box{
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.title,.date,.desc{
    display: inline-block;
    font-size: 18px;
    margin:2px 0;
}
.title{
    font-weight: 500;
}
.date,.desc{
    color: gray;
}
</style>